<!-- 游戏区域 -->
<template>
    <div class="matchGround">
       <div class="row">
        <div class="col-4">
            <div class="user-photo">
                <img :src="$store.state.user.photo" alt="">
            </div>
            <div class="user-username">
                {{ $store.state.user.username }}
            </div>
        </div>

        <div class="col-4">
            <div class="user-select-snake">
                <select v-model="select_snake" class="form-select" aria-label="Default select example">
                    <option value="-1" selected>亲自上阵</option>
                    <option v-for="snake in snakes" :key="snake.id" :value="snake.id">{{ snake.title }}</option>
                </select>
            </div>
        </div>

        <div class="col-4">
            <div class="user-photo">
                <img :src="$store.state.pk.opponent_photo" alt="">
            </div>
            <div class="user-username">
                {{ $store.state.pk.opponent_username }}
            </div>
        </div>
        <div class="col-12" style="text-align: center; padding-top: 15vh;">
                <button type="button" @click="click_match_bfn()" class="btn btn-primary btn-lg">{{ match_button_info }}</button>
            </div> 
       </div>
    </div>
    </template>
    
    <script>
    import { ref } from 'vue';
    import { useStore } from 'vuex';
    import $ from "jquery";

    export default {
        setup() {
            let snakes = ref([]);
            const store = useStore();
            let match_button_info = ref('开始匹配');
            let select_snake = ref("-1");

            const click_match_bfn = () => {
                if (match_button_info.value === "开始匹配") {
                    match_button_info.value = "取消"
                    // 向后端发送一个字符串
                    store.state.pk.socket.send(JSON.stringify({
                        event: "start_matching",
                        snake_id: select_snake.value,
                    }));

                } else {
                    match_button_info.value = "开始匹配"
                    store.state.pk.socket.send(JSON.stringify({
                        event: "stop_matching",
                    }));
                }
                
            }

            const refresh_bots = () => {
            $.ajax({
                url: "http://localhost:3000/user/snake/getList",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(response) {
                    snakes.value = response;
                },
            })
        };

        refresh_bots();

            return {
                match_button_info,
                click_match_bfn,
                snakes,
                refresh_bots,
                select_snake
            }
        }
    }
    </script>
    
    
    <style scoped>

    div.user-select-snake {
        padding-top: 30vh;
    }

    div.user-select-snake > select {
        width: 60%;
        margin: 0 auto;
    }
    div.matchGround {
        width: 70vw;
        height: 80vh;
        margin: 40px auto;
        background-color: rgba(50, 50, 50, 0.5);
    }

    div.user-photo {
        text-align: center;
        padding-top: 10vh;
    }

    div.user-photo > img {
        border-radius: 50%;
        width: 20vh;
    }

    div.user-username {
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        color: white;
        padding-top: 3vh;
    }
    </style>